<template>
    <a-space style="margin-bottom: 10px">
        任务状态
        <a-radio-group v-model:value="getParams.status" option-type="button" :options="ruleStatusOptions3" />
        <a-select style="width: 100px" :options="userOptions" v-model:value="getParams.uid"> </a-select>
        <a-input placeholder="输入任务名..." v-model:value="getParams.search" style="width: 150px"></a-input>
        <a-button type="primary" @click="searchFunc" :loading="searchLoading">
            <template #icon>
                <SearchOutlined />
            </template>
            搜索
        </a-button>
    </a-space>
    <a-space v-if="useAdminShow()" style="margin-left: 50px">
        <a-popconfirm title="确定操作吗?" ok-text="确定" cancel-text="取消" @confirm="startRun">
            <a-button type="primary">开启后台程序 </a-button>
        </a-popconfirm>
        <a-popconfirm title="确定操作吗?" ok-text="确定" cancel-text="取消" @confirm="stopRun">
            <a-button type="dashed" danger>关闭后台程序 </a-button>
        </a-popconfirm>
    </a-space>
    <a-spin :style="spinStyle" :spinning="tableLoading">
        <a-table
            :columns="columns"
            @change="handleTableChange"
            :data-source="tableData"
            sticky
            bordered
            :scroll="{ x: 1500 }"
            :pagination="false"
            size="small"
            class="table"
        >
        </a-table>
        <br />
        <a-row justify="center" v-if="total > 10">
            <a-pagination
                v-model:current="getParams.page"
                v-model:pageSize="getParams.size"
                show-quick-jumper
                showSizeChanger
                :total="total"
                @change="pageChange"
                :show-total="(total: number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
</template>

<script lang="ts" setup>
    import { SearchOutlined } from "@ant-design/icons-vue";
    import { useSpinLoadingState } from "@/hooks/useCommon";
    import { useCommonStaticOptions } from "@/hooks/useEsArticleCommon";
    import { useColumns } from "@/hooks/aiTask/useAiReWriteTask";
    import { message } from "ant-design-vue";
    import mainStore from "@/stores/main";
    import { useAdminShow } from "@/hooks/useCommon";
    import { aiReWriteTaskApi, aiReWriteTaskStartApi, aiReWriteTaskStopApi } from "@/api/aiTask";
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    const { ruleStatusOptions3 } = useCommonStaticOptions();
    const getParams = reactive<GetAiRewriteTaskParams>({
        uid: 0,
        size: 10,
        page: 1,
        search: "",
        status: 0
    });
    const { columns, isReloadData, userOptions } = useColumns(toRef(getParams, "status"));
    const $store = mainStore();
    // 表格数据
    const tableData = ref<Array<AITaskList>>([]);
    // 控制搜索按钮加载
    const searchLoading = ref(false);
    // 任务总数
    const total = ref(0);
    const sortObj = {
        order: "",
        sort_field: ""
    };
    const searchQuery = ref<Record<string, any>>({});
    const pageChange = (pageNumber: number) => {
        getParams.page = pageNumber;
        searchFunc();
    };
    // 表格排序发生改变
    const handleTableChange = (pag: any, filters: any, sorter: any) => {
        if (sorter.order) {
            sortObj.order = sorter.order.slice(0, sorter.order.length - 3);
            sortObj.sort_field = sorter.field;
        } else {
            sortObj.order = "";
        }
        searchFunc();
    };
    const searchFunc = () => {
        searchLoading.value = true;
        tableLoading.value = true;
        // 避免page和size 大于总数
        if ((getParams.page || 1) * (getParams.size || 10) > total.value) {
            getParams.page = Math.floor(total.value / (getParams.size || 10)) + 1;
        }
        aiReWriteTaskApi("get", { ...getParams, ...sortObj })
            .then((res) => {
                if (res.data.code === 200) {
                    tableData.value = res.data.data;
                    total.value = res.data.total;
                    searchQuery.value = res.data.query;
                } else {
                    message.error("加载失败!");
                }
            })
            .catch((e) => {
                message.error("加载失败!");
            })
            .finally(() => {
                isReloadData.value = false;
                searchLoading.value = false;
                tableLoading.value = false;
            });
    };
    const startRun = () => {
        aiReWriteTaskStartApi()
            .then((res) => {
                if (res.data.code === 200) {
                    message.success("操作成功!");
                }
            })
            .catch((res) => {
                message.error(res.data.msg);
            });
    };
    const stopRun = () => {
        aiReWriteTaskStopApi()
            .then((res) => {
                if (res.data.code === 200) {
                    message.success("操作成功!");
                } else {
                    message.error(res.data.msg);
                }
            })
            .catch((e) => {
                message.error(e.data.msg);
            });
    };
    watch(isReloadData, (v) => v && searchFunc());
    onMounted(() => {
        searchFunc();
    });
</script>

<style scoped lang="scss"></style>
@/hooks/aitask/useAiReWriteTask
